<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>注册页面</title>
    <!--    引入格式文件-->
    <link rel="stylesheet" href="./css/reg.css"/>
    <script src="../lib/jquery.js"></script>
    <script src="../lib/axios.js"></script>
</head>

<body>
<style></style>
<div class="rg_layout">
    <div class="rg_left">
        <p>新用户注册</p>
        <p>USER REGISTER</p>
    </div>
    <div class="rg_center">
        <div class="rg_form">
            <form action="#" method="post" autocomplete="off">
                <table>
                    <tr>
                        <td class="td_left"><label for="username">用户名</label></td>
                        <td class="td_right">
                            <input type="text" id="username"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="password">密码</label></td>
                        <td class="td_right">
                            <input type="password" id="password"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="phone">手机号</label></td>
                        <td class="td_right">
                            <input type="text" id="phone"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="">性别</label></td>
                        <td class="td_right">
                            <label><input type="radio" class="sex" name="sex" value="1" checked/>男</label
                            >&nbsp;&nbsp;&nbsp;
                            <label><input type="radio" class="sex" name="sex" value="0"/>女</label>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="">是否VIP</label></td>
                        <td class="td_right">
                            <label><input type="radio" class="vip" name="vip" value="1"/>是</label
                            >&nbsp;&nbsp;&nbsp;
                            <label><input type="radio" class="vip" name="vip" value="0" checked/>否</label>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="question">密保问题</label></td>
                        <td class="td_right">
                            <input type="text" id="question"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="answer">密保答案</label></td>
                        <td class="td_right">
                            <input type="text" id="answer"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="avatar">头像</label></td>
                        <td class="td_right">
                            <input type="text" id="avatar" disabled/>
                            <button>选择图片</button>
                            <input type="file" hidden/>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center">
                            <input type="submit" value="立即注册" id="btn_sub"/>
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <div class="rg_right">
        <p>已有账号？<a href="/01-loginBaseCode/login.html">立即登录</a></p>
    </div>
</div>
<script>
    $(function () {
        // 用户名
        const username = $('#username')
        // 密码
        const password = $('#password')
        // 手机号
        const phone = $('#phone')
        // sex
        const sex = $('form [name=sex]')
        // vip
        const vip = $('form [name=vip]')
        // 问题
        const question = $('#question')
        // 密保答案
        const answer = $('#answer')
        // 头像
        // const avatar = $('#avatar').files()
        $('form').on('submit', function (e) {
            e.preventDefault()
            // $.ajax({
            //     method: 'POST',
            //     url: 'http://124.223.14.236:3001/api/user/reg',
            //     data: {
            //         username: username.val(),
            //         password: password.val(),
            //         phone: phone.val(),
            //         sex: sex.val(),
            //         vip: vip.val(),
            //         question: question.val(),
            //         answer: answer.val(),
            //     },
            //     success: function(res) {
            //         console.log(res)
            //     }
            // })

            // const data = {
            //             username: username.val(),
            //             password: password.val(),
            //             phone: phone.val(),
            //             sex: +sex.val(),
            //             vip: +vip.val(),
            //             question: question.val(),
            //             answer: answer.val()
            //         }
            // console.log(data)
            async function fn() {
                try {
                    const {data} = await axios.post('http://124.223.14.236:3001/api/user/reg', {
                        data: {
                            username: username.val(),
                            password: password.val(),
                            phone: phone.val(),
                            sex: +sex.val(),
                            vip: +vip.val(),
                            question: question.val(),
                            answer: answer.val(),
                        },
                    })
                    console.log(data)
                } catch (error) {
                    console.log(error)
                }
            }

            fn()
        })
    })
</script>
</body>
</html>
